<!-- 排行榜单 -->
<template>
	<card :cardHeight="cardHeight" cardTitle="排行榜单" noMore @mouseenter="isStart = false" @mouseleave="isStart = true">
		<div style="margin: 0 5px; height: 100%">
			<div class="table_head" :style="{ fontSize: (16 * pageScale > 14 ? 16 * pageScale : 14) + 'px' }">
				<div class="tr1 tr">支行名称</div>
				<div class="tr5 tr">排名</div>
				<div class="tr5 tr">总用信金额(元)</div>
				<div class="tr5 tr">总授信金额(元)</div>
				<div class="tr5 tr">总评估金额(元)</div>
				<div class="tr5 tr">总抵押金额(元)</div>
			</div>
			<div class="table_body" :style="{ fontSize: 14 * pageScale + 'px', height: maxCanSee * 45 + 'px' }">
				<!-- tableTop随时间推移不对增减，即列表不断往上 -->
				<div class="table_list" :style="{ top: tableTop + 'px', transition: tableTop == 0 ? 'all 0s' : 'all 0.5s' }">
					<div class="tr_div" v-for="(item, index) in tableList" :key="index + 'a'" :class="{ firstrow: index == 0 }">
						<div class="tr1 tr" :title="item.deptName || item.farmName">{{ item.deptName || item.farmName }}</div>
						<div class="tr5 tr">
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 0">
								<img src="/no1.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 1">
								<img src="/no2.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 2">
								<img src="/no3.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index > 2">
								<span>No.{{ index + 1 }}</span>
							</div>
						</div>
						<div class="tr5 tr num" style="color: #06706c" :title="priceFormat(item.useCost, 2)">
							{{ priceFormat(item.useCost > 1e4 ? priceWan(item.useCost) : item.useCost, 2) }}{{ item.useCost > 1e4 ? '万' : '' }}
						</div>
						<div class="tr5 tr num" :title="priceFormat(item.creditCost, 2)">
							{{ priceFormat(item.creditCost > 1e4 ? priceWan(item.creditCost) : item.creditCost, 2) }}{{ item.creditCost > 1e4 ? '万' : '' }}
						</div>
						<div class="tr5 tr num" :title="priceFormat(item.assessCost, 2)">
							{{ priceFormat(item.assessCost > 1e4 ? priceWan(item.assessCost) : item.assessCost, 2) }}{{ item.assessCost > 1e4 ? '万' : '' }}
						</div>
						<div class="tr5 tr num" :title="priceFormat(item.pledgeCost, 2)">
							{{ priceFormat(item.pledgeCost > 1e4 ? priceWan(item.pledgeCost) : item.pledgeCost, 2) }}{{ item.pledgeCost > 1e4 ? '万' : '' }}
						</div>
					</div>
					<template v-if="isShowClone">
						<div class="tr_div" v-for="(item, index) in tableList" :key="index + 'b'" :class="{ firstrow: index == 0 }">
							<div class="tr1 tr" :title="item.deptName || item.farmName">
								{{ item.deptName || item.farmName }}
							</div>
							<div class="tr5 tr">
								<div
									class="rank"
									:class="['rank' + (index + 1)]"
									:style="{
										fontSize: (index == 0 ? 20 : index < 3 ? 18 : 14) * pageScale + 'px'
									}"
								>
									<span>No.{{ index + 1 }}</span>
								</div>
							</div>
							<div class="tr5 tr num" style="color: #06706c" :title="priceFormat(item.useCost, 2)">
								{{ priceFormat(item.useCost > 1e4 ? priceWan(item.useCost) : item.useCost, 2) }}{{ item.useCost > 1e4 ? '万' : '' }}
							</div>
							<div class="tr5 tr num" :title="priceFormat(item.creditCost, 2)">
								{{ priceFormat(item.creditCost > 1e4 ? priceWan(item.creditCost) : item.creditCost, 2) }}{{ item.creditCost > 1e4 ? '万' : '' }}
							</div>
							<div class="tr5 tr num" :title="priceFormat(item.assessCost, 2)">
								{{ priceFormat(item.assessCost > 1e4 ? priceWan(item.assessCost) : item.assessCost, 2) }}{{ item.assessCost > 1e4 ? '万' : '' }}
							</div>
							<div class="tr5 tr num" :title="priceFormat(item.pledgeCost, 2)">
								{{ priceFormat(item.pledgeCost > 1e4 ? priceWan(item.pledgeCost) : item.pledgeCost, 2) }}{{ item.pledgeCost > 1e4 ? '万' : '' }}
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';
var count = 0; //每滚动一次，count加1
export default {
	data() {
		return {
			tableList: [],
			tableTimer: null,
			tableTop: 0, //列表向上移动的像素
			showFlag: false,
			componentTimer: null,
			maxCanSee: 4, //maxCanSee代表可视范围内的最大完整数据条数
			tableLineHeight: 45, //tableLineHeight代表列表中一行的高度
			isStart: false
		};
	},
	mixins: [StatisticsMixins],
	created() {},
	computed: {
		isShowClone() {
			let h = this.cardHeight.replace('px', '');
			for (var i = 1; i <= this.tableList.length; i++) {
				if (i * 45 > h - 63 - 40) {
					this.maxCanSee == i - 1;
					break;
				}
			}

			return this.tableList.length * 45 > h - 63 - 40;
		},
		isScroll() {
			const { isShowClone, isStart } = this;
			return {
				isShowClone,
				isStart
			};
		}
	},
	watch: {
		isScroll() {
			if (this.isShowClone && this.isStart) {
				console.log('gundongma');
				this.tableTimerFun();
			} else {
				clearInterval(this.tableTimer);
			}
		}
	},
	destroyed() {
		clearInterval(this.tableTimer);
	},
	methods: {
		tableTimerFun() {
			if (this.tableList.length > this.maxCanSee) {
				//tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
				clearInterval(this.tableTimer);
				this.tableTimer = setInterval(() => {
					console.log('this.tableTop', this.tableTop);
					if (count < this.tableList.length) {
						//如果还没滚动到最后一条数据，则列表向上移动以上的高度
						this.tableTop -= this.tableLineHeight; //tableLineHeight代表列表中一行的高度
						count++; //每滚动一次，count加1
					} else {
						//如果滚动到最后一条，则恢复初始状态
						count = 0;
						this.tableTop = 0;
					}
				}, 3000);
			}
		},
		getInfo() {
			clearInterval(this.tableTimer);
			this.isStart = false;
			this.$postAction(mortgageapi.echartsUrl.findUseRanking + '?orgId=' + this.globalOrgId).then(da => {
				if (da.code == 1) {
					let list = da.data;
					this.tableList = [...list];
					count = 0;
					this.tableTop = 0;
					this.isStart = true;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.table_head {
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: flex;
	color: #939aa5;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	padding: 0 18px;
}
.tr1 {
	width: 25%;
}
.tr2 {
	width: 25%;
}
.tr3 {
	width: 18%;
}

.tr4 {
	width: 18%;
}
.tr5 {
	flex: 1;
}
.tr {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 5px;
	text-align: center;
}

.table_body {
	width: 100%;
	height: 270px;
	overflow: hidden;
	position: relative;
	color: #24292e;
	font-size: 14px;
}

.table_list {
	width: 100%;
	position: absolute;
	transition: all 0.5s;
	padding: 0 18px;
}

.tr_div {
	width: 100%;
	display: flex;
	color: #24292e;
	text-align: center;
	line-height: 45px;
	font-size: 14px;
	font-weight: bold;
	position: relative;
}
.tr_div > div {
	position: relative;
}
.firstrow {
	// font-size: 18px;
}
.firstrow:before {
	background: linear-gradient(88deg, #5adede 0%, rgba(90, 222, 222, 0.28) 100%);
	transform: skew(-30deg, 0deg);
	position: absolute;
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	z-index: 0;
	opacity: 0.2;
}
.firstrow .tr1 {
	color: #047773;
}
// .rank1,
// .rank2,
// .rank3 {
// 	color: #fff;
// 	position: relative;
// }
.rank > span {
	position: relative;
	color: #24292e;
	font-size: 16px;
}
.rank1 > img {
	width: 43px !important;
	height: 46px !important;
}
.rank > img {
	width: 35px;
	height: 39px;
}
// .rank1 {
// }
// .rank2,
// .rank3 {
// 	font-size: 18px;
// }
// .rank1:before,
// .rank2:before,
// .rank3:before {
// 	background: linear-gradient(88deg, #f87c8e 0%, #fbc697 100%);
// 	transform: skew(-30deg, 0deg) translate(-10px, -50%);
// 	position: absolute;
// 	content: '';
// 	display: block;
// 	height: 100%;
// 	left: 20px;
// 	right: 20px;
// 	z-index: 0;
// 	top: 50%;
// }
// .rank1:before {
// 	background: linear-gradient(88deg, #f87c8e 0%, #fbc697 100%);
// }
// .rank2:before,
// .rank3:before {
// 	left: 30px;
// 	right: 30px;
// 	height: 80%;
// }
// .rank2:before {
// 	background: linear-gradient(88deg, #467dfe 0%, #49afff 100%);
// }
// .rank3:before {
// 	background: linear-gradient(88deg, #e49217 0%, #f4d471 100%);
// }
.num {
	font-family: DIN;
}
</style>
